<div class="top-banner">
    <div class="container">基础样式</div>
</div>
<div class="container clearfix" style="margin-top:15px">
    <div class="aside-menu" fix-menu>
        <ul>
            <li><a anchor="text">文本</a></li>
            <li><a anchor="layout">布局</a></li>
            <li><a anchor="grid">网格</a></li>
            <li><a anchor="border">边框</a></li>
            <li><a anchor="placehold">占位</a></li>
            <li><a anchor="justify">两端对齐</a></li>
            <li><a anchor="nowrap">文字截断</a></li>
        </ul>
    </div>

    <article>
        <!--文本start-->
        <section id="text">
            <h3 class="demo-title">文本</h3>
            <hr>
            <div class="demo-panel">
                <h1>h1:大标题 36px</h1>
                <h2>h2:栏目 34px</h2>
                <h3>h3:正文段落 32px</h3>
                <h4>h4:人名歌名标题等 32px</h4>
                <h5>h5: 28px</h5>
                <h6>h6: 24px</h6>

<pre lang-prism class="language-html">
<code class="language-html">
&lt;h1&gt;h1:大标题 36px&lt;/h1&gt;  或者  &lt;div class="h1"&gt;h1:大标题 36px&lt;/div&gt;
&lt;h2&gt;h2:栏目 34px&lt;/h2&gt;   或者  &lt;div&gt;h2:栏目 34px&lt;/div&gt;
&lt;h3&gt;h3:栏目 32px&lt;/h3&gt;
&lt;h4&gt;h4:人名歌名标题等 32px&lt;/h4&gt;
&lt;h5&gt;h5:28px&lt;/h5&gt;
&lt;h6&gt;h6:24px&lt;/h6&gt;
</code>
</pre>
<br>
<h6>标准字体大小及对应行高</h6>
<ul>
    <li class="text-standard-size-12">12号字体，行高18</li>
    <li class="text-standard-size-13">13号字体，行高18</li>
    <li class="text-standard-size-14">13号字体，行高20</li>
    <li class="text-standard-size-16">16号字体，行高22</li>
    <li class="text-standard-size-18">18号字体，行高24</li>
    <li class="text-standard-size-24">24号字体，行高30</li>
    <li class="text-standard-size-28">28号字体，行高32</li>
    <li class="text-standard-size-36">36号字体，行高46</li>
</ul>
                <br>
                <h6>文字颜色</h6>
                <ul>
                    <li class="text-default">默认颜色</li>
                    <li class="text-black">黑色</li>
                    <li class="text-grey">灰色</li>
                    <li class="text-light">浅灰色</li>
                    <li class="text-color80">#808080</li>
                    <li class="text-color6">#666</li>
                </ul>
<pre lang-prism class="language-html">
<code class="language-html">
&lt;ul&gt;
    &lt;li class="text-default"&gt;默认颜色&lt;/li&gt;
    &lt;li class="text-black"&gt;黑色&lt;/li&gt;
    &lt;li class="text-grey"&gt;灰色&lt;/li&gt;
    &lt;li class="text-light"&gt;浅灰色&lt;/li&gt;
    &lt;li class="text-color80"&gt;#808080&lt;/li&gt;
    &lt;li class="text-color6"&gt;#666&lt;/li&gt;
&lt;/ul&gt;
</code>
</pre>
                <h6>文字两端对齐</h6>
                <div class="text-justify-one demo-text">
                    单行文本
                </div>
                <div class="text-justify demo-text">
                    普通的多行文本内容：在首个《进击的巨人》预热视频中只是描述了一个巨人恰好拿起一人准备放进嘴巴里面，而另个场景则是超大型巨人附着浓重的烟雾将巨手拍下来。将于今年8月1日上映。
                </div>
<pre lang-prism class="language-html">
<code class="language-html">
&lt;div class="text-justify-one demo-text"&gt;
    单行文本
&lt;/div&gt;
&lt;div class="text-justify demo-text"&gt;
    普通的多行文本内容：在首个《进击的巨人》预热视频中只是描述了一个巨人恰好拿起一人准备放进嘴巴里面
    ，而另个场景则是超大型巨人附着浓重的烟雾将巨手拍下来。将于今年8月1日上映。
&lt;/div&gt;
</code>
</pre>
            </div>

        </section>
        <!--文本end-->
        <br>
        <br>
        <br>

        <!--布局start-->
        <section id="layout">
            <h3 class="demo-title">布局</h3>
            <hr>
            <h6>平铺</h6>
            <div class="demo-panel">

                <ul class="layout-tiled">
                    <li>菜单1 <br>111</li>
                    <li>菜单2 <br>222</li>
                    <li>菜单3 <br>333</li>
                    <li>菜单4 <br>444</li>
                </ul>

<pre lang-prism class="language-html">
<code class="language-html">
    &lt;ul class="layout-tiled"&gt;
        &lt;li&gt;菜单1&lt;/li&gt;
        &lt;li&gt;菜单2&lt;/li&gt;
        &lt;li&gt;菜单3&lt;/li&gt;
        &lt;li&gt;菜单4&lt;/li&gt;
    &lt;/ul&gt;
</code>
</pre>
            </div>
            <br>
            <div class="demo-panel">
                <h6>flex布局(默认横向)</h6>
                <ul class="layout-flex border-default layout-flex-pack-start" style="min-height:80px">
                    <li>左</li>
                    <li>左</li>
                    <li>左</li>
                </ul>
                <ul class="layout-flex border-default layout-flex-pack-end" style="min-height:80px;margin-top:10px;">
                    <li>右</li>
                    <li>右</li>
                    <li>右</li>
                </ul>
                <ul class="layout-flex border-default layout-flex-pack-center" style="min-height:80px;margin-top:10px;">
                    <li>中</li>
                    <li>中</li>
                </ul>
                <ul class="layout-flex border-default layout-flex-align-start" style="min-height:80px;margin-top:10px;">
                    <li>上</li>
                    <li>上</li>
                    <li>上</li>
                    <li>上</li>
                    <li>上</li>
                </ul>
                <ul class="layout-flex border-default layout-flex-align-center" style="min-height:80px;margin-top:10px;">
                    <li>中</li>
                    <li>中</li>
                    <li>中</li>
                    <li>中</li>
                    <li>中</li>
                </ul>
                <ul class="layout-flex border-default layout-flex-align-end" style="min-height:80px;margin-top:10px;">
                    <li>下</li>
                    <li>下</li>
                    <li>下</li>
                    <li>下</li>
                    <li>下</li>
                </ul>
<pre lang-prism class="language-html">
<code class="language-html">
&lt;ul class="layout-flex border-default layout-flex-pack-start"&gt;
    &lt;li&gt;11&lt;/li&gt; &lt;li&gt;22&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class="layout-flex border-default layout-flex-pack-end"&gt;
    &lt;li&gt;右&lt;/li&gt; &lt;li&gt;右&lt;/li&gt; &lt;li&gt;右&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class="layout-flex border-default layout-flex-pack-center"&gt;
    &lt;li&gt;中&lt;/li&gt; &lt;li&gt;中&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class="layout-flex border-default layout-flex-align-start"&gt;
    &lt;li&gt;上&lt;/li&gt; &lt;li&gt;上&lt;/li&gt; &lt;li&gt;上&lt;/li&gt; &lt;li&gt;上&lt;/li&gt; &lt;li&gt;上&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class="layout-flex border-default layout-flex-align-center"&gt;
    &lt;li&gt;中&lt;/li&gt; &lt;li&gt;中&lt;/li&gt; &lt;li&gt;中&lt;/li&gt; &lt;li&gt;中&lt;/li&gt; &lt;li&gt;中&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class="layout-flex border-default layout-flex-align-end"&gt;
    &lt;li&gt;下&lt;/li&gt;&lt;li&gt;下&lt;/li&gt; &lt;li&gt;下&lt;/li&gt; &lt;li&gt;下&lt;/li&gt; &lt;li&gt;下&lt;/li&gt;
&lt;/ul&gt;
</code>
</pre>
            </div>
        </section>
        <!--布局end-->
        <br>
        <br>
        <br>

        <!--边框start-->
        <section id="border">
            <h3 class="demo-title">边框</h3>
            <hr />
            <div class="demo-panel">
                <ul class="demo-border">
                    <li class="border-t">上边框</li>
                    <li class="border-b">下边框</li>
                    <li class="border-l">左边框</li>
                    <li class="border-r">右边框</li>
                    <li class="border-lr">左右边框</li>
                    <li class="border-tb">上下边框</li>
                </ul>
<pre lang-prism class="language-html">
<code class="language-html">
&lt;ul class="demo-border"&gt;
    &lt;li class="border-t"&gt;上边框&lt;/li&gt;
    &lt;li class="border-b"&gt;下边框&lt;/li&gt;
    &lt;li class="border-l"&gt;左边框&lt;/li&gt;
    &lt;li class="border-r"&gt;右边框&lt;/li&gt;
    &lt;li class="border-lr"&gt;左右边框&lt;/li&gt;
    &lt;li class="border-tb"&gt;上下边框&lt;/li&gt;
&lt;/ul&gt;
</code>
</pre>
            </div>
        </section>
        <!--边框end-->
        <br>
        <br>
        <br>

        <!--占位start-->
        <section id="placehold">
            <h3 class="demo-title">占位</h3>
            <hr />
            <div class="demo-panel">
                <ul class="demo-placehold row-flex">
                    <li class="col-flex-2">
                        <div class="placehold-wrap-default">
                            <div class="placehold-body">
                                16:9
                            </div>
                        </div>
                    </li>
                    <li class="col-flex-2">
                        <div class="placehold-wrap-rect">
                            <div class="placehold-body">
                                1:1
                            </div>
                        </div>
                    </li>
                </ul>
<pre lang-prism class="language-html">
<code class="language-html">
&lt;ul class="demo-placehold row-flex"&gt;
    &lt;li class="col-flex-2"&gt;
        &lt;div class="placehold-wrap-default"&gt;
            &lt;div class="placehold-body"&gt;
                16:9
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="col-flex-2"&gt;
        &lt;div class="placehold-wrap-rect"&gt;
            &lt;div class="placehold-body"&gt;
                1:1
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code>
</pre>
            </div>
        </section>
        <!--占位end-->
        <br>
        <br>
        <br>

        <!--两端对齐start-->
        <section id="justify">
            <h3 class="demo-title">两端对齐</h3>
            <hr />
            <div class="demo-panel">
                <ul class="demo-justify row-justify">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
<pre lang-prism class="language-html">
<code class="language-html">
&lt;ul class="demo-justify row-justify"&gt;
    &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt;
&lt;/ul&gt;
</code>
</pre>
            </div>
        </section>
        <!--两端对齐end-->
        <br>
        <br>
        <br>

        <!--网格start-->
        <section id="grid">
            <h3 class="demo-title">网格</h3>
            <hr />
            <h6>float 类型栅格（适合多行，默认为全屏12格，可自行定制）</h6>
            <div class="demo-panel">
                <ul class="demo-grid clearfix">
                    <li class="col-3"><div>col-3</div></li>
                    <li class="col-9"><div>col-9</div></li>
                    <li class="col-4"><div>col-4</div></li>
                    <li class="col-8"><div>col-8</div></li>
                    <li class="col-6"><div>col-6</div></li>
                    <li class="col-6"><div>col-6</div></li>
                </ul>
<pre lang-prism class="language-html">
<code class="language-html">
&lt;ul class="demo-grid clearfix"&gt;
    &lt;li class="col-3"&gt;&lt;div&gt;col-3&lt;/div&gt;&lt;/li&gt;
    &lt;li class="col-9"&gt;&lt;div&gt;col-9&lt;/div&gt;&lt;/li&gt;
    &lt;li class="col-4"&gt;&lt;div&gt;col-4&lt;/div&gt;&lt;/li&gt;
    &lt;li class="col-8"&gt;&lt;div&gt;col-8&lt;/div&gt;&lt;/li&gt;
    &lt;li class="col-6"&gt;&lt;div&gt;col-6&lt;/div&gt;&lt;/li&gt;
    &lt;li class="col-6"&gt;&lt;div&gt;col-6&lt;/div&gt;&lt;/li&gt;
&lt;/ul&gt;
</code>
</pre>
                <br>
                <h6>flex类型网格（单行）</h6>
                <ul class="demo-grid whitespace-h row-flex">
                    <li class="col-flex-1">1/3</li>
                    <li class="col-flex-2">2/3</li>
                </ul>
                <ul class="demo-grid whitespace-h row-flex">
                    <li class="col-flex-2">2/5</li>
                    <li class="col-flex-3">3/5</li>
                </ul>
                <ul class="demo-grid whitespace-h row-flex">
                    <li class="col-flex-3">3/8</li>
                    <li class="col-flex-5">5/8</li>
                </ul>
<pre lang-prism class="language-html">
<code class="language-html">
&lt;ul class="demo-grid whitespace-h row-flex"&gt;
    &lt;li class="col-flex-1"&gt;1/3&lt;/li&gt;
    &lt;li class="col-flex-2"&gt;2/3&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class="demo-grid whitespace-h row-flex"&gt;
    &lt;li class="col-flex-2"&gt;2/5&lt;/li&gt;
    &lt;li class="col-flex-3"&gt;3/5&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class="demo-grid whitespace-h row-flex"&gt;
    &lt;li class="col-flex-3"&gt;3/8&lt;/li&gt;
    &lt;li class="col-flex-5"&gt;5/8&lt;/li&gt;
&lt;/ul&gt;
</code>
</pre>
                <br>
                <h6>竖排flex</h6>
                <ul class="demo-grid-ver whitespace-h row-flex row-flex-ver">
                    <li class="col-flex-1"><div>1/3</div></li>
                    <li class="col-flex-2"><div>2/3</div></li>
                </ul>
                <ul class="demo-grid-ver whitespace-h row-flex row-flex-ver">
                    <li class="col-flex-2"><div>2/5</div></li>
                    <li class="col-flex-3"><div>3/5</div></li>
                </ul>
                <ul class="demo-grid-ver whitespace-h row-flex row-flex-ver">
                    <li class="col-flex-3"><div>3/8</div></li>
                    <li class="col-flex-5"><div>5/8</div></li>
                </ul>
<pre lang-prism class="language-html">
<code class="language-html">
&lt;ul class="demo-grid-ver whitespace-h row-flex row-flex-ver"&gt;
    &lt;li class="col-flex-1"&gt;&lt;div&gt;1/3&lt;/div&gt;&lt;/li&gt;
    &lt;li class="col-flex-2"&gt;&lt;div&gt;2/3&lt;/div&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class="demo-grid-ver whitespace-h row-flex row-flex-ver"&gt;
    &lt;li class="col-flex-2"&gt;&lt;div&gt;2/5&lt;/div&gt;&lt;/li&gt;
    &lt;li class="col-flex-3"&gt;&lt;div&gt;3/5&lt;/div&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class="demo-grid-ver whitespace-h row-flex row-flex-ver"&gt;
    &lt;li class="col-flex-3"&gt;&lt;div&gt;3/8&lt;/div&gt;&lt;/li&gt;
    &lt;li class="col-flex-5"&gt;&lt;div&gt;5/8&lt;/div&gt;&lt;/li&gt;
&lt;/ul&gt;
</code>
</pre>
            </div>
        </section>
        <!--网格end-->
        <br>
        <br>
        <br>

        <section id="nowrap">
            <h3 class="demo-title">文字截断</h3>
            <hr>
            <div class="demo-panel">
                <div class="nowrap">一行文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略</div>
                <br/>
                <div class="nowrap-2">两行文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略</div>
                <br/>
                <div class="nowrap-3">三行文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略</div>
<pre lang-prism class="language-html">
    <code class="language-html">
    &lt;div class="nowrap"&gt;一行文字超出长度省略&lt;/div&gt;
        <br/>
    &lt;div class="nowrap-2"&gt;两行文字超出长度省略&lt;/div&gt;
        <br/>
    &lt;div class="nowrap-3"&gt;三行文字超出长度省略&lt;/div&gt;
    </code>
</pre>
            </div>
        </section>
        <section id="row">
            <div class="demo-panel">

            </div>
        </section>
    </article>
</div>